<template>
  <view class="cart-item">
    <movable-area class="movable-area">
      <movable-view class="movable-view" direction="horizontal" :out-of-bounds="false" :x="moveX" :disabled="isDeleting"
        @change="handleChange" @touchend="handleTouchEnd">
        <!-- 商品内容区 -->
        <view class="content">
          <view class="item_left">
            <view>
              <image :src="item?.firstPicture" class="item_img" mode="widthFix" />
            </view>
            <view>
              <view class="item_name">{{ item?.oe }}</view>
              <view class="item_content">{{ item?.productName }}</view>
              <view class="item_year">
                <span>{{ item?.year }}</span>
              </view>
            </view>
          </view>
          <view class="item_quantity">
            {{ item?.quantity }}
          </view>
        </view>

        <!-- 删除按钮区域 -->
        <view class="action-btn delete-btn" :class="{ 'show': showDelete }" @click="handleDelete">
          <text class="btn-text">删除</text>
        </view>
      </movable-view>
    </movable-area>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['delete'])

const moveX = ref(0)
const isDeleting = ref(false)
const deleteWidth = 80
const deleteThreshold = deleteWidth / 2

// 计算是否显示删除按钮
const showDelete = computed(() => {
  return moveX.value < -deleteThreshold
})

// 处理滑动变化
const handleChange = (e) => {
  if (isDeleting.value) return
  moveX.value = e.detail.x
}

// 处理滑动结束
const handleTouchEnd = () => {
  if (isDeleting.value) return

  if (moveX.value < -deleteThreshold) {
    // 显示删除按钮
    moveX.value = -deleteWidth
  } else {
    // 回弹
    moveX.value = 0
  }
}

// 处理删除
const handleDelete = async () => {
  isDeleting.value = true
  uni.vibrateShort() // 触感反馈
  // 删除动画
  moveX.value = -uni.upx2px(750) // 滑出屏幕
  await new Promise(resolve => setTimeout(resolve, 100))

  emit('delete', props.item)
  isDeleting.value = false
  moveX.value = 0
}
</script>

<style lang="scss" scoped>
@import "@/static/css/index.scss";

.cart-item {
  width: 100%;
  background: #fff;
  overflow: hidden;

  &:not(:last-child) {
    border-bottom: 1px solid #eee;
  }
}

.movable-area {
  width: 100%;
  height: 120px; // 根据实际内容调整
  position: relative;
}

.movable-view {
  width: calc(100% + 80px);
  height: 100%;
  display: flex;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.22, 1);

  &.deleting {
    transition: transform 0.2s ease-in;
  }
}


.action-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160rpx;
  right: -160rpx;
  transform: translateX(0);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.22, 1);
}

.delete-btn {
  background: #ff3b30;

  &.show {
    transform: translateX(-80px);

    .btn-text {
      transform: scale(1.1);
    }
  }

  .btn-text {
    color: #fff;
    font-size: 16px;
    transition: transform 0.3s ease;
  }
}

// 添加按压效果
@media (hover: hover) {
  .delete-btn:hover {
    background: darken(#ff3b30, 5%);
  }
}

.delete-btn:active {
  background: darken(#ff3b30, 10%);

  .btn-text {
    transform: scale(0.95);
  }
}

.content {
  // flex: 1;
  // display: flex;
  // justify-content: space-between;
  // width: 100%;
  // background: #fff;
  // transform: translateX(0);
  // padding: 20rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
}

.item_left {
  display: flex;

  image {
    margin-right: 20rpx;
  }

  .item_name {
    color: #fff;
    background-color: $primary-b;
    padding: 0 20rpx;
    border-radius: 2rpx;
  }

  .item_content {
    color: #6C6C6C;
  }

  .item_year {
    font-size: 20rpx;
    color: #737373;
  }
}

.item_img {
  width: 60rpx;
  height: 60rpx;
}

.item_quantity {
  margin-right: 160rpx;
  background-color: $primary-b;
  border-radius: 20rpx;
  padding-right: 20rpx;
  padding-left: 20rpx;
  height: 40rpx;
  line-height: 40rpx;
  color: #fff;
}
</style>
